<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<title>苗木通讯录</title>
<include file="Public/header"/>
<style type="text/css">
.progress {width:100%;padding: 1px; border-radius:3px;display:none;}
.bar {background-color: green;display:block; width:0%; height:20px; line-height:20px; border-radius: 3px; }
.percent { position:absolute; height:10px; display:inline-block; line-height:20px;  top:3px; left:2%; color:#fff }
</style>
</head>
<body >
<div class=" wrap">
	<!--<form id="myform" method="post" action="" enctype="multipart/form-data">-->
		<div class="top">
			<i class="fa fa-angle-left fa-2x top_l" onclick="window.location.href='{:U('Index/editlist')}'"></i>
			<i class="fa fa-phone fa-lg top_r" id="telephone"></i>
		</div>
		<div class="login_con" style="margin-top:60px;">
			<div class="weui_cells weui_cells_form">
			<div class="progress" >
				<span class="bar"></span><span class="percent"></span>
			</div>
				<div class="weui_cell">
					<div class="weui_cell_bd weui_cell_primary">
						<div class="weui_uploader">
							<div class="weui_uploader_hd weui_cell">
								<div class="weui_cell_bd weui_cell_primary">头像修改</div>
								<div class="weui_cell_ft"><!--0/2--></div>
							</div>
							<div class="weui_uploader_bd">
								<ul class="weui_uploader_files">
									<!--<li class="weui_uploader_file" style="background-image:url(...)"></li>-->
									<!--<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
										<div class="weui_uploader_status_content">
											<i class="weui_icon_warn"></i>
										</div>
									</li>-->
									<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
<img src="{$info['headimgurl']}" style="width:100%;height:100%;" id="headimg"/>
									</li>
								</ul>
								<div class="weui_uploader_input_wrp">
									<input class="weui_uploader_input" type="file" accept="image/*" multiple="" id="fileimg" name="fileimg">
								</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<button class="btn" id="submitimg" type="submit">确认提交</button>-->
		</div>
	<!--</form>-->
	<include file="Public/footern"/>
</div>
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/city/jquery.cityselect.js"></script>
<script>
$(function () {
    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var progress = $(".progress"); 
    //var btn = $("#submitimg"); 
    $("#fileimg").wrap("<form id='myupload' action='{:U('Index/ajaxhead')}'method='post' enctype='multipart/form-data'></form>"); 
    $("#fileimg").change(function(){ //选择文件 
        $("#myupload").ajaxSubmit({ 
            dataType:  'json', //数据格式为json 
            beforeSend: function() { //开始上传 
                progress.show(); //显示进度条 
                var percentVal = '0%'; //开始进度为0% 
                bar.width(percentVal); //进度条的宽度 
                percent.html(percentVal); //显示进度为0% 
                //btn.text("上传中..."); //上传按钮显示上传中 
            }, 
            uploadProgress: function(event, position, total, percentComplete) { 
                var percentVal = percentComplete + '%'; //获得进度 
                bar.width(percentVal); //上传进度条宽度变宽 
                percent.html(percentVal); //显示上传进度百分比 
            }, 
            success: function(data) { //成功 
                //显示上传后的图片 
				if(data.code == 1) {
					var img = data.file; 
					$('#headimg').attr("src",img); 
				}
				alert(data.msg);
				progress.hide();
                //btn.text("确认提交"); //上传按钮还原 
            }, 
            error:function(xhr){ //上传失败 
                //btn.text("确认提交"); //上传按钮还原 
                bar.width('0'); 
				progress.hide();
				alert(data.msg);
                //files.html(xhr.responseText); //返回失败信息 
            } 
        }); 
    }); 
}); 

/*
function checkfrom() {
	var v = $('#fileimg').val();
	if(v == '') {
		alert('请上传图片！');	
		return false;
	}
	$('#submitimg').hide();
	return true;
}
*/

$(function() {
	$('#active4').css("color","#2abc7c");
	$('#active4').find('i').css("color","#2abc7c");
/*
	$("#fileimg").change(function(){
		var objUrl = getObjectURL(this.files[0]) ;
		console.log("objUrl = "+objUrl) ;
		if (objUrl) {
			$("#headimg").attr("src", objUrl) ;
		}
	}) ;
*/
});

//建立一個可存取到該file的url
function getObjectURL(file) {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}
</script>
